<!doctype html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<title>Chart.js | 开源的 HTML5 图表工具</title>
		
	
	<script>
	/*! modernizr 3.3.1 (Custom Build) | MIT *
	 * http://modernizr.com/download/?-cssanimations-setclasses-shiv !*/
	!function(e,t,n){function r(e,t){return typeof e===t}function o(){var e,t,n,o,a,i,s;for(var l in C)if(C.hasOwnProperty(l)){if(e=[],t=C[l],t.name&&(e.push(t.name.toLowerCase()),t.options&&t.options.aliases&&t.options.aliases.length))for(n=0;n<t.options.aliases.length;n++)e.push(t.options.aliases[n].toLowerCase());for(o=r(t.fn,"function")?t.fn():t.fn,a=0;a<e.length;a++)i=e[a],s=i.split("."),1===s.length?Modernizr[s[0]]=o:(!Modernizr[s[0]]||Modernizr[s[0]]instanceof Boolean||(Modernizr[s[0]]=new Boolean(Modernizr[s[0]])),Modernizr[s[0]][s[1]]=o),y.push((o?"":"no-")+s.join("-"))}}function a(e){var t=S.className,n=Modernizr._config.classPrefix||"";if(b&&(t=t.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+n+"no-js(\\s|$)");t=t.replace(r,"$1"+n+"js$2")}Modernizr._config.enableClasses&&(t+=" "+n+e.join(" "+n),b?S.className.baseVal=t:S.className=t)}function i(e,t){return!!~(""+e).indexOf(t)}function s(){return"function"!=typeof t.createElement?t.createElement(arguments[0]):b?t.createElementNS.call(t,"http://www.w3.org/2000/svg",arguments[0]):t.createElement.apply(t,arguments)}function l(e){return e.replace(/([a-z])-([a-z])/g,function(e,t,n){return t+n.toUpperCase()}).replace(/^-/,"")}function c(e,t){return function(){return e.apply(t,arguments)}}function u(e,t,n){var o;for(var a in e)if(e[a]in t)return n===!1?e[a]:(o=t[e[a]],r(o,"function")?c(o,n||t):o);return!1}function f(e){return e.replace(/([A-Z])/g,function(e,t){return"-"+t.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(){var e=t.body;return e||(e=s(b?"svg":"body"),e.fake=!0),e}function m(e,n,r,o){var a,i,l,c,u="modernizr",f=s("div"),m=d();if(parseInt(r,10))for(;r--;)l=s("div"),l.id=o?o[r]:u+(r+1),f.appendChild(l);return a=s("style"),a.type="text/css",a.id="s"+u,(m.fake?m:f).appendChild(a),m.appendChild(f),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(t.createTextNode(e)),f.id=u,m.fake&&(m.style.background="",m.style.overflow="hidden",c=S.style.overflow,S.style.overflow="hidden",S.appendChild(m)),i=n(f,e),m.fake?(m.parentNode.removeChild(m),S.style.overflow=c,S.offsetHeight):f.parentNode.removeChild(f),!!i}function p(t,r){var o=t.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(f(t[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var a=[];o--;)a.push("("+f(t[o])+":"+r+")");return a=a.join(" or "),m("@supports ("+a+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return n}function h(e,t,o,a){function c(){f&&(delete j.style,delete j.modElem)}if(a=r(a,"undefined")?!1:a,!r(o,"undefined")){var u=p(e,o);if(!r(u,"undefined"))return u}for(var f,d,m,h,g,v=["modernizr","tspan"];!j.style;)f=!0,j.modElem=s(v.shift()),j.style=j.modElem.style;for(m=e.length,d=0;m>d;d++)if(h=e[d],g=j.style[h],i(h,"-")&&(h=l(h)),j.style[h]!==n){if(a||r(o,"undefined"))return c(),"pfx"==t?h:!0;try{j.style[h]=o}catch(y){}if(j.style[h]!=g)return c(),"pfx"==t?h:!0}return c(),!1}function g(e,t,n,o,a){var i=e.charAt(0).toUpperCase()+e.slice(1),s=(e+" "+x.join(i+" ")+i).split(" ");return r(t,"string")||r(t,"undefined")?h(s,t,o,a):(s=(e+" "+_.join(i+" ")+i).split(" "),u(s,t,n))}function v(e,t,r){return g(e,n,n,t,r)}var y=[],C=[],E={_version:"3.3.1",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,t){var n=this;setTimeout(function(){t(n[e])},0)},addTest:function(e,t,n){C.push({name:e,fn:t,options:n})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=E,Modernizr=new Modernizr;var S=t.documentElement,b="svg"===S.nodeName.toLowerCase();b||!function(e,t){function n(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function r(){var e=C.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=C.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),C.elements=n+" "+e,c(t)}function a(e){var t=y[e[g]];return t||(t={},v++,e[g]=v,y[v]=t),t}function i(e,n,r){if(n||(n=t),f)return n.createElement(e);r||(r=a(n));var o;return o=r.cache[e]?r.cache[e].cloneNode():h.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!o.canHaveChildren||p.test(e)||o.tagUrn?o:r.frag.appendChild(o)}function s(e,n){if(e||(e=t),f)return e.createDocumentFragment();n=n||a(e);for(var o=n.frag.cloneNode(),i=0,s=r(),l=s.length;l>i;i++)o.createElement(s[i]);return o}function l(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return C.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+r().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(C,t.frag)}function c(e){e||(e=t);var r=a(e);return!C.shivCSS||u||r.hasCSS||(r.hasCSS=!!n(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||l(e,r),e}var u,f,d="3.7.3",m=e.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,h=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,g="_html5shiv",v=0,y={};!function(){try{var e=t.createElement("a");e.innerHTML="<xyz></xyz>",u="hidden"in e,f=1==e.childNodes.length||function(){t.createElement("a");var e=t.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(n){u=!0,f=!0}}();var C={elements:m.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:d,shivCSS:m.shivCSS!==!1,supportsUnknownElements:f,shivMethods:m.shivMethods!==!1,type:"default",shivDocument:c,createElement:i,createDocumentFragment:s,addElements:o};e.html5=C,c(t),"object"==typeof module&&module.exports&&(module.exports=C)}("undefined"!=typeof e?e:this,t);var w="Moz O ms Webkit",x=E._config.usePrefixes?w.split(" "):[];E._cssomPrefixes=x;var _=E._config.usePrefixes?w.toLowerCase().split(" "):[];E._domPrefixes=_;var N={elem:s("modernizr")};Modernizr._q.push(function(){delete N.elem});var j={style:N.elem.style};Modernizr._q.unshift(function(){delete j.style}),E.testAllProps=g,E.testAllProps=v,Modernizr.addTest("cssanimations",v("animationName","a",!0)),o(),a(y),delete E.addTest,delete E.addAsyncTest;for(var k=0;k<Modernizr._q.length;k++)Modernizr._q[k]();e.Modernizr=Modernizr}(window,document);
</script>

	<meta name="description" content="Chart.js 是一套简单、干净并且有吸引力的基于 HTML5 技术的 JavaScript 图表工具。Chart.js 为你提供了完整的易于集成到你的网站的生动、交互的图表。">

		<link rel="icon" href="https://chartjs.bootcss.com/favicon.ico">
		<link rel="stylesheet" type="text/css" href="static/css/styles.css">
	</head>

	
	<body class="homepage">
		<div class="background-chart fade-in">
			<canvas id="background-bar"></canvas>
		</div>
		<div class="content-overlay fade-in-up animation-delay__1">
			<div class="hero-container">
				<img class="chart-logo fade-in animation-delay__3" src="static/picture/chartjs-logo.svg">
				<div class="fade-in fade-in animation-delay__5">
					<h1 class="hero-title">Chart.js</h1>
					<h2 class="hero-subtitle">为设计和开发人员准备的简单、灵活的 JavaScript 图表工具</h2>
				</div>
				<div class="hero-button-wrapper fade-in animation-delay__6">
					<a class="button button__red" href="javascript:;">入门</a>
					<a class="button button__blue" href="javascript:;">实例</a>
					<a class="button button__black" href="javascript:;" target="_blank">GitHub</a>
				</div>
			</div>
			<hr>
			<div class="feature-container fade-in animation-delay__7">
				<div class="feature">
					<div class="feature-text">
						<h3 class="subtitle">
							<span class="pill pill__new">2.0 版本新增</span>
							混合图表类型
						</h3>
						<p class="description">混合并匹配条形图和折线图，以便在数据集之间提供清晰的视觉区分。</p>
					</div>
					<div class="feature-chart feature-chart__right">
						<canvas id="mixed-chart" height="200" width="300"></canvas>
					</div>
				</div>
				<div class="feature">
					<div class="feature-text feature-text__pull-right">
						<h3 class="subtitle">
							<span class="pill pill__new">2.0 版本新增</span>
							新图表轴类型
						</h3>
						<p class="description">轻松绘制复杂的、日期稀疏矩阵的、对数的、甚至完全自定义的维度。</p>
					</div>
					<div class="feature-chart feature-chart__left feature-chart__pull-right">
						<canvas id="axis-chart" height="200" width="300"></canvas>
					</div>
				</div>
				<div class="feature">
					<div class="feature-text">
						<h3 class="subtitle">
							<span class="pill pill__new">2.0 版本新增</span>
							一切皆可动画呈现！
						</h3>
						<p class="description">在改变数据、更新颜色和添加数据时，均有开箱即用的动画效果。</p>
					</div>
					<div class="feature-chart feature-chart__right">
						<canvas id="animate-chart" height="200" width="300"></canvas>
					</div>
				</div>
			</div>
			<hr>
			<div class="feature-small-container fade-in animation-delay__7">
				<div class="feature-small">
					<div class="feature-icon">
						<img src="static/picture/open-source.svg">
					</div>
					<h4 class="subtitle subtitle__small">开源</h4>
					<p class="description description__small">Chart.js 是由社区共同维护的开源项目，欢迎任何人参与！</p>
				</div>
				<div class="feature-small">
					<div class="feature-icon">
						<img src="static/picture/chart-types.svg">
					</div>
					<h4 class="subtitle subtitle__small">8 中图表类型</h4>
					<p class="description description__small">为你的数据提供 8 种可视化展现方式，每种方式都具有动态效果并且可定制。</p>
				</div>
				<div class="feature-small">
					<div class="feature-icon">
						<img src="static/picture/canvas-icon.svg">
					</div>
					<h4 class="subtitle subtitle__small">HTML5 Canvas</h4>
					<p class="description description__small">在所有现代浏览器（IE11+）上都有高效的绘图效率。</p>
				</div>
				<div class="feature-small">
					<div class="feature-icon">
						<img src="static/picture/responsive.svg">
					</div>
					<h4 class="subtitle subtitle__small">响应式</h4>
					<p class="description description__small">根据窗口尺寸的变化重绘所有图表，展现更加细腻。</p>
				</div>
			</div>

			<hr>

			<div class="link-container fade-in animation-delay__7">
				<h2 class="subtitle">
					<a href="javascript:;" target="_blank">访问 Chart.js 在 GitHub 上的源码仓库</a> 或者 <a href="javascript:;"> 查阅详细文档</a>
				</h2>
			</div>
		</div>

		<footer class="fade-in animation-delay__8">
			<div class="footer-logo">
	<img src="static/picture/icon.svg">
</div>
<p class="footer-note">Chart.js 是所有<a href="javascript:;" target="_blank">贡献者</a>共同的成果。

		</p></footer>

		<script async="" src="static/js/build.js"></script>
	</body>


</html>
